Page-Specific Styles

**Referenced Files in This Document** - [main.css](file://src/assets/css/main.css) - [06-parallax-hero-three-js-scroll-driven-terrain.css](file://src/assets/css/modules/06-parallax-hero-three-js-scroll-driven-terrain.css) - [hero-parallax.js](file://src/assets/js/modules/hero-parallax.js) - [hero-animations.js](file://src/assets/js/modules/hero-animations.js) - [10-logo-marquee.css](file://src/assets/css/modules/10-logo-marquee.css) - [15-cta-section.css](file://src/assets/css/modules/15-cta-section.css) - [18-about-page.css](file://src/assets/css/modules/18-about-page.css) - [20-team-page-full-profiles.css](file://src/assets/css/modules/20-team-page-full-profiles.css) - [21-cases-page.css](file://src/assets/css/modules/21-cases-page.css) - [22-news-insights-page.css](file://src/assets/css/modules/22-news-insights-page.css) - [25-responsive-tablet-max-width-1024px.css](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css) - [cta-section.njk](file://src/_includes/macros/cta-section.njk) - [team-flip-card.njk](file://src/_includes/macros/team-flip-card.njk) - [case-study-card.njk](file://src/_includes/macros/case-study-card.njk) - [news-article-card.njk](file://src/_includes/macros/news-article-card.njk)

Table of Contents

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion

Introduction

This document explains the page-specific styling implementations across the project, with a focus on:

  • Hero section styling, including a Three.js-powered parallax terrain with scroll-driven camera movement and animated text transitions
  • Specialized page layouts for teams, case studies, and news
  • Section-specific components such as logo marquees, CTA sections, and membership displays
  • Page composition patterns, layout grids, and content-specific styling
  • Responsive adaptations for tablets and smaller screens
  • Performance considerations for complex animations and interactive elements

Project Structure

The styling system is organized around a modular CSS architecture imported via a single entry point, with dedicated modules for each page or component area. JavaScript modules manage dynamic animations and interactions, especially for the hero sections.

graph TB
subgraph "CSS Modules"
M["main.css"]
PHT["06-parallax-hero-three-js-scroll-driven-terrain.css"]
LM["10-logo-marquee.css"]
CTAS["15-cta-section.css"]
AP["18-about-page.css"]
TP["20-team-page-full-profiles.css"]
CP["21-cases-page.css"]
NP["22-news-insights-page.css"]
RT["25-responsive-tablet-max-width-1024px.css"]
end
subgraph "JS Modules"
HP["hero-parallax.js"]
HA["hero-animations.js"]
end
subgraph "Nunjucks Macros"
CTA["cta-section.njk"]
TFC["team-flip-card.njk"]
CSC["case-study-card.njk"]
NAC["news-article-card.njk"]
end
M --> PHT
M --> LM
M --> CTAS
M --> AP
M --> TP
M --> CP
M --> NP
M --> RT
HP --- PHT
HA --- PHT
CTA --- CTAS
TFC --- TP
CSC --- CP
NAC --- NP

Diagram sources

  • [main.css:1-47](file://src/assets/css/main.css#L1-L47)
  • [06-parallax-hero-three-js-scroll-driven-terrain.css:1-193](file://src/assets/css/modules/06-parallax-hero-three-js-scroll-driven-terrain.css#L1-L193)
  • [hero-parallax.js:1-462](file://src/assets/js/modules/hero-parallax.js#L1-L462)
  • [hero-animations.js:1-307](file://src/assets/js/modules/hero-animations.js#L1-L307)
  • [10-logo-marquee.css:1-79](file://src/assets/css/modules/10-logo-marquee.css#L1-L79)
  • [15-cta-section.css:1-101](file://src/assets/css/modules/15-cta-section.css#L1-L101)
  • [18-about-page.css:1-144](file://src/assets/css/modules/18-about-page.css#L1-L144)
  • [20-team-page-full-profiles.css:1-225](file://src/assets/css/modules/20-team-page-full-profiles.css#L1-L225)
  • [21-cases-page.css:1-55](file://src/assets/css/modules/21-cases-page.css#L1-L55)
  • [22-news-insights-page.css:1-151](file://src/assets/css/modules/22-news-insights-page.css#L1-L151)
  • [25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)
  • [cta-section.njk:1-18](file://src/_includes/macros/cta-section.njk#L1-L18)
  • [team-flip-card.njk:1-18](file://src/_includes/macros/team-flip-card.njk#L1-L18)
  • [case-study-card.njk:1-20](file://src/_includes/macros/case-study-card.njk#L1-L20)
  • [news-article-card.njk:1-35](file://src/_includes/macros/news-article-card.njk#L1-L35)

Section sources

  • [main.css:1-47](file://src/assets/css/main.css#L1-L47)

Core Components

  • Parallax hero with Three.js terrain and scroll-driven camera
  • GSAP-based hero animations for non-Three.js pages
  • Logo marquee for client/partner showcases
  • CTA section with gradient backgrounds and animated buttons
  • Page-specific layouts for About, Team, Cases, and News
  • Responsive adaptations targeting tablet and smaller screens

Section sources

  • [06-parallax-hero-three-js-scroll-driven-terrain.css:1-193](file://src/assets/css/modules/06-parallax-hero-three-js-scroll-driven-terrain.css#L1-L193)
  • [hero-parallax.js:1-462](file://src/assets/js/modules/hero-parallax.js#L1-L462)
  • [hero-animations.js:1-307](file://src/assets/js/modules/hero-animations.js#L1-L307)
  • [10-logo-marquee.css:1-79](file://src/assets/css/modules/10-logo-marquee.css#L1-L79)
  • [15-cta-section.css:1-101](file://src/assets/css/modules/15-cta-section.css#L1-L101)
  • [18-about-page.css:1-144](file://src/assets/css/modules/18-about-page.css#L1-L144)
  • [20-team-page-full-profiles.css:1-225](file://src/assets/css/modules/20-team-page-full-profiles.css#L1-L225)
  • [21-cases-page.css:1-55](file://src/assets/css/modules/21-cases-page.css#L1-L55)
  • [22-news-insights-page.css:1-151](file://src/assets/css/modules/22-news-insights-page.css#L1-L151)
  • [25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)

Architecture Overview

The styling architecture separates concerns by module and composes them through a single entry point. JavaScript modules augment the hero experiences differently depending on whether a Three.js scene is active or not. Nunjucks macros encapsulate reusable components for team, case study, and news listings.

graph TB
Entry["main.css<br/>imports modules"] --> Hero3D["Parallax Hero CSS<br/>06-parallax-hero-three-js-scroll-driven-terrain.css"]
Entry --> Marquee["Logo Marquee CSS<br/>10-logo-marquee.css"]
Entry --> CTA["CTA Section CSS<br/>15-cta-section.css"]
Entry --> About["About Page CSS<br/>18-about-page.css"]
Entry --> Team["Team Page CSS<br/>20-team-page-full-profiles.css"]
Entry --> Cases["Cases Page CSS<br/>21-cases-page.css"]
Entry --> News["News Insights CSS<br/>22-news-insights-page.css"]
Entry --> Resp["Responsive Tablet CSS<br/>25-responsive-tablet-max-width-1024px.css"]
Hero3D --> JS3D["hero-parallax.js"]
Hero3D --> JSGSAP["hero-animations.js (fallback)"]
Team --> TeamMacro["team-flip-card.njk"]
Cases --> CaseMacro["case-study-card.njk"]
News --> NewsMacro["news-article-card.njk"]
CTA --> CTAMacro["cta-section.njk"]

Diagram sources

  • [main.css:1-47](file://src/assets/css/main.css#L1-L47)
  • [06-parallax-hero-three-js-scroll-driven-terrain.css:1-193](file://src/assets/css/modules/06-parallax-hero-three-js-scroll-driven-terrain.css#L1-L193)
  • [hero-parallax.js:1-462](file://src/assets/js/modules/hero-parallax.js#L1-L462)
  • [hero-animations.js:1-307](file://src/assets/js/modules/hero-animations.js#L1-L307)
  • [10-logo-marquee.css:1-79](file://src/assets/css/modules/10-logo-marquee.css#L1-L79)
  • [15-cta-section.css:1-101](file://src/assets/css/modules/15-cta-section.css#L1-L101)
  • [18-about-page.css:1-144](file://src/assets/css/modules/18-about-page.css#L1-L144)
  • [20-team-page-full-profiles.css:1-225](file://src/assets/css/modules/20-team-page-full-profiles.css#L1-L225)
  • [21-cases-page.css:1-55](file://src/assets/css/modules/21-cases-page.css#L1-L55)
  • [22-news-insights-page.css:1-151](file://src/assets/css/modules/22-news-insights-page.css#L1-L151)
  • [25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)
  • [team-flip-card.njk:1-18](file://src/_includes/macros/team-flip-card.njk#L1-L18)
  • [case-study-card.njk:1-20](file://src/_includes/macros/case-study-card.njk#L1-L20)
  • [news-article-card.njk:1-35](file://src/_includes/macros/news-article-card.njk#L1-L35)
  • [cta-section.njk:1-18](file://src/_includes/macros/cta-section.njk#L1-L18)

Detailed Component Analysis

Parallax Hero with Three.js Terrain and Scroll-Driven Animations

The parallax hero integrates Three.js to render a procedural terrain with contour lines, a glowing light node, and a particle trail. Scroll position drives the camera along a curved path, while text scrambles between coordinates and narrative text. The scene fades out as the user scrolls down to reveal page content beneath.

Key behaviors:

  • Scene setup: WebGL renderer, camera, fog, pixel ratio clamping
  • Terrain generation: plane geometry with procedural height sampling and normals
  • Contour lines: computed in idle callbacks for performance
  • Path: Catmull-Rom curve defines camera movement and lighting
  • Glow textures: additive sprites for halo and core
  • Trail: dynamic buffer updates with color fading and spark emission
  • Scroll driver: reads scroll progress and smooths it for camera motion
  • Text scrambling: toggles between coordinate and narrative text based on scroll progress
  • Theme observer: switches materials and colors based on light/dark mode
sequenceDiagram
participant Doc as "Document"
participant Scroll as "Scroll Listener"
participant Scene as "Three.js Scene"
participant Cam as "Camera"
participant Renderer as "WebGLRenderer"
participant Sky as "Sky Layer"
Doc->>Scroll : "scroll event"
Scroll->>Scene : "readScroll()"
Scene->>Scene : "smoothProgress += ..."
Scene->>Cam : "set position from path curve"
Scene->>Cam : "lookAt ahead point"
Scene->>Sky : "translateX(-camPos.x * 0.4)"
Scene->>Renderer : "render(scene, camera)"
Renderer-->>Doc : "frame rendered"

Diagram sources

  • [hero-parallax.js:297-446](file://src/assets/js/modules/hero-parallax.js#L297-L446)
  • [06-parallax-hero-three-js-scroll-driven-terrain.css:16-26](file://src/assets/css/modules/06-parallax-hero-three-js-scroll-driven-terrain.css#L16-L26)

Section sources

  • [hero-parallax.js:1-462](file://src/assets/js/modules/hero-parallax.js#L1-L462)
  • [06-parallax-hero-three-js-scroll-driven-terrain.css:1-193](file://src/assets/css/modules/06-parallax-hero-three-js-scroll-driven-terrain.css#L1-L193)

GSAP-Based Hero Animations (Fallback)

For pages without the Three.js hero, GSAP orchestrates:

  • Initial text reveals with staggered word animations
  • Optional particle canvas background
  • Southern Cross star twinkle effect
  • Topographic line draw-in with scroll-triggered parallax
  • Navigation path draw with waypoint activation and flipboard headline reveal
  • Scroll reveals using IntersectionObserver
flowchart TD
Start(["initHeroAnimations"]) --> Check3D{"Has .parallax-hero?"}
Check3D --> |Yes| Exit3D["Return (Three.js handles hero)"]
Check3D --> |No| HomeCheck{"Is homepage hero?"}
HomeCheck --> |Yes| SetupHome["Hide text, init particles if present"]
SetupHome --> Reduced{"prefers-reduced-motion?"}
Reduced --> |Yes| ReduceReveal["Immediate opacity reveal"]
Reduced --> |No| AnimateHome["initSouthernCross + initTopoLines + initNavPath"]
HomeCheck --> |No| OtherReveal["Slide-up reveal timeline"]
AnimateHome --> NavPath["initNavPath"]
NavPath --> Flipboard["initHeroFlipboard"]
ReduceReveal --> Done(["Ready"])
Flipboard --> Done
OtherReveal --> Done
Exit3D --> Done

Diagram sources

  • [hero-animations.js:3-44](file://src/assets/js/modules/hero-animations.js#L3-L44)
  • [hero-animations.js:107-121](file://src/assets/js/modules/hero-animations.js#L107-L121)
  • [hero-animations.js:125-152](file://src/assets/js/modules/hero-animations.js#L125-L152)
  • [hero-animations.js:156-209](file://src/assets/js/modules/hero-animations.js#L156-L209)
  • [hero-animations.js:213-276](file://src/assets/js/modules/hero-animations.js#L213-L276)

Section sources

  • [hero-animations.js:1-307](file://src/assets/js/modules/hero-animations.js#L1-L307)

Logo Marquee Component

A horizontally scrolling marquee of logos with hover interactions and optional grayscale overrides. Animation pauses on hover for emphasis.

flowchart TD
Init["Render logo-track"] --> Animate["Apply marquee animation"]
Hover["Hover over track"] --> Pause["Pause animation"]
Leave["Mouse leave"] --> Resume["Resume animation"]
ItemHover["Hover over logo-item"] --> Enhance["Increase opacity, remove grayscale, scale"]
ItemLeave["Mouse leave logo-item"] --> Reset["Restore grayscale and scale"]

Diagram sources

  • [10-logo-marquee.css:17-22](file://src/assets/css/modules/10-logo-marquee.css#L17-L22)
  • [10-logo-marquee.css:41-45](file://src/assets/css/modules/10-logo-marquee.css#L41-L45)

Section sources

  • [10-logo-marquee.css:1-79](file://src/assets/css/modules/10-logo-marquee.css#L1-L79)

CTA Section Component

A unified CTA section with gradient background, centered content, and animated button. Supports theming via a data attribute and optional highlight text.

classDiagram
class CTAMacro {
+section(title, buttonText, buttonUrl, subtitle, theme, highlightText)
}
class CTACSS {
+cta-section
+cta-content
+cta-title
+cta-sub
+cta-button
}
CTAMacro --> CTACSS : "renders HTML matching selectors"

Diagram sources

  • [cta-section.njk:1-18](file://src/_includes/macros/cta-section.njk#L1-L18)
  • [15-cta-section.css:5-15](file://src/assets/css/modules/15-cta-section.css#L5-L15)

Section sources

  • [cta-section.njk:1-18](file://src/_includes/macros/cta-section.njk#L1-L18)
  • [15-cta-section.css:1-101](file://src/assets/css/modules/15-cta-section.css#L1-L101)

Team Page Layout and Profile Cards

The team page features a hero with video background and sticky profile blocks. Profiles include front/back flip behavior and capability matrix cards.

graph LR
Hero["Team Hero"] --> Video["Video Background"]
Hero --> Content["Centered Content"]
Profiles["Profile Blocks"] --> StickyImg["Sticky Image Wrapper"]
Profiles --> Bio["Bio Content"]
CapMatrix["Capability Matrix"] --> Grid["4-column Grid"]
Grid --> Card["Matrix Cards"]

Diagram sources

  • [20-team-page-full-profiles.css:5-53](file://src/assets/css/modules/20-team-page-full-profiles.css#L5-L53)
  • [20-team-page-full-profiles.css:88-94](file://src/assets/css/modules/20-team-page-full-profiles.css#L88-L94)
  • [20-team-page-full-profiles.css:139-142](file://src/assets/css/modules/20-team-page-full-profiles.css#L139-L142)
  • [20-team-page-full-profiles.css:149-154](file://src/assets/css/modules/20-team-page-full-profiles.css#L149-L154)

Section sources

  • [20-team-page-full-profiles.css:1-225](file://src/assets/css/modules/20-team-page-full-profiles.css#L1-L225)
  • [team-flip-card.njk:1-18](file://src/_includes/macros/team-flip-card.njk#L1-L18)

Cases Page Layout

Grid-based presentation of case studies with hover scaling and quote boxes.

classDiagram
class CasesCSS {
+cases-hero
+cases-grid-section
+case-studies-grid
+case-study-card
}
class CaseMacro {
+card(item)
}
CaseMacro --> CasesCSS : "renders matching cards"

Diagram sources

  • [21-cases-page.css:5-19](file://src/assets/css/modules/21-cases-page.css#L5-L19)
  • [21-cases-page.css:21-33](file://src/assets/css/modules/21-cases-page.css#L21-L33)
  • [case-study-card.njk:1-20](file://src/_includes/macros/case-study-card.njk#L1-L20)

Section sources

  • [21-cases-page.css:1-55](file://src/assets/css/modules/21-cases-page.css#L1-L55)
  • [case-study-card.njk:1-20](file://src/_includes/macros/case-study-card.njk#L1-L20)

News & Insights Page Layout

Features include polling visualizations, a featured article area, resource cards, and a filtered news grid with expandable details.

graph TB
NewsSec["News Articles Section"] --> PollVis["Polling Visualization"]
NewsSec --> Feature["Feature Article"]
NewsSec --> Resources["Resource Cards"]
NewsSec --> NewsGrid["News Expandable Grid"]
PollVis --> Bars["Segmented Bars"]
Feature --> Img["Image Wrapper"]
Resources --> RC["Resource Cards"]
NewsGrid --> NI["News Items"]

Diagram sources

  • [22-news-insights-page.css:7-15](file://src/assets/css/modules/22-news-insights-page.css#L7-L15)
  • [22-news-insights-page.css:17-46](file://src/assets/css/modules/22-news-insights-page.css#L17-L46)
  • [22-news-insights-page.css:52-76](file://src/assets/css/modules/22-news-insights-page.css#L52-L76)
  • [22-news-insights-page.css:77-96](file://src/assets/css/modules/22-news-insights-page.css#L77-L96)
  • [22-news-insights-page.css:97-132](file://src/assets/css/modules/22-news-insights-page.css#L97-L132)

Section sources

  • [22-news-insights-page.css:1-151](file://src/assets/css/modules/22-news-insights-page.css#L1-L151)
  • [news-article-card.njk:1-35](file://src/_includes/macros/news-article-card.njk#L1-L35)

Membership / Professional Affiliations Section

A minimal section wrapper for displaying memberships and affiliations with consistent spacing and background.

Section sources

  • [14-membership-professional-affiliations.css:1-13](file://src/assets/css/modules/14-membership-professional-affiliations.css#L1-L13)

Responsive Adaptations (Tablet and Smaller)

Responsive rules adapt hero heights, navigation, carousels, grids, and typography for screens up to 1024px wide. Includes mobile menu animations and theme-aware overrides.

flowchart TD
MQ["max-width: 1024px"] --> Nav["Mobile menu adjustments"]
MQ --> Carousels["Carousel card widths"]
MQ --> Grids["Grid template changes"]
MQ --> Heroes["Hero content padding"]
MQ --> IAA["IAA hero and grid adjustments"]
MQ --> Footer["Footer grid columns"]

Diagram sources

  • [25-responsive-tablet-max-width-1024px.css:6-330](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L6-L330)

Section sources

  • [25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)

Dependency Analysis

  • CSS entry point imports all modules in a defined order, ensuring proper cascade and specificity.
  • The Three.js hero depends on:
    • CSS for scene positioning, sky layer, vignette, and typography
    • JavaScript for scene construction, contour generation, camera movement, and scroll-driven updates
  • Non-Three.js heroes depend on GSAP for animations and ScrollTrigger for scroll-linked effects.
  • Macros provide reusable HTML structures that match CSS selectors for consistent rendering.
graph LR
MainCSS["main.css"] --> Mod1["06-parallax-hero-three-js-scroll-driven-terrain.css"]
MainCSS --> Mod2["10-logo-marquee.css"]
MainCSS --> Mod3["15-cta-section.css"]
MainCSS --> Mod4["18-about-page.css"]
MainCSS --> Mod5["20-team-page-full-profiles.css"]
MainCSS --> Mod6["21-cases-page.css"]
MainCSS --> Mod7["22-news-insights-page.css"]
MainCSS --> Mod8["25-responsive-tablet-max-width-1024px.css"]
Mod1 --> JS1["hero-parallax.js"]
Mod1 --> JS2["hero-animations.js"]
Mod3 --> Macro1["cta-section.njk"]
Mod5 --> Macro2["team-flip-card.njk"]
Mod6 --> Macro3["case-study-card.njk"]
Mod7 --> Macro4["news-article-card.njk"]

Diagram sources

  • [main.css:1-47](file://src/assets/css/main.css#L1-L47)
  • [06-parallax-hero-three-js-scroll-driven-terrain.css:1-193](file://src/assets/css/modules/06-parallax-hero-three-js-scroll-driven-terrain.css#L1-L193)
  • [hero-parallax.js:1-462](file://src/assets/js/modules/hero-parallax.js#L1-L462)
  • [hero-animations.js:1-307](file://src/assets/js/modules/hero-animations.js#L1-L307)
  • [10-logo-marquee.css:1-79](file://src/assets/css/modules/10-logo-marquee.css#L1-L79)
  • [15-cta-section.css:1-101](file://src/assets/css/modules/15-cta-section.css#L1-L101)
  • [18-about-page.css:1-144](file://src/assets/css/modules/18-about-page.css#L1-L144)
  • [20-team-page-full-profiles.css:1-225](file://src/assets/css/modules/20-team-page-full-profiles.css#L1-L225)
  • [21-cases-page.css:1-55](file://src/assets/css/modules/21-cases-page.css#L1-L55)
  • [22-news-insights-page.css:1-151](file://src/assets/css/modules/22-news-insights-page.css#L1-L151)
  • [25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)
  • [cta-section.njk:1-18](file://src/_includes/macros/cta-section.njk#L1-L18)
  • [team-flip-card.njk:1-18](file://src/_includes/macros/team-flip-card.njk#L1-L18)
  • [case-study-card.njk:1-20](file://src/_includes/macros/case-study-card.njk#L1-L20)
  • [news-article-card.njk:1-35](file://src/_includes/macros/news-article-card.njk#L1-L35)

Section sources

  • [main.css:1-47](file://src/assets/css/main.css#L1-L47)

Performance Considerations

  • Three.js hero
    • Uses requestAnimationFrame with sleep-on-hide to minimize CPU/GPU usage when offscreen
    • Fog and pixel ratio clamping reduce rendering overhead
    • Contour lines built incrementally during idle periods
    • Trail buffers use copyWithin to efficiently shift data
    • Camera smoothing reduces jitter during scroll
  • GSAP animations
    • Scroll-triggered parallax uses ScrollTrigger with scrubbing for smooth performance
    • IntersectionObserver-based reveals avoid continuous ticking
    • Reduced motion detection short-circuits complex animations
  • General
    • CSS transforms and opacity preferred over layout-affecting properties
    • will-change hints applied to moving elements
    • Responsive breakpoints reduce heavy computations on smaller screens

Section sources

  • [hero-parallax.js:379-446](file://src/assets/js/modules/hero-parallax.js#L379-L446)
  • [hero-parallax.js:85-149](file://src/assets/js/modules/hero-parallax.js#L85-L149)
  • [hero-parallax.js:258-295](file://src/assets/js/modules/hero-parallax.js#L258-L295)
  • [hero-animations.js:142-151](file://src/assets/js/modules/hero-animations.js#L142-L151)
  • [hero-animations.js:283-304](file://src/assets/js/modules/hero-animations.js#L283-L304)

Troubleshooting Guide

  • Three.js hero not animating
    • Verify the presence of the scroll driver element and that scroll events fire
    • Confirm the scene container and canvas exist and are sized appropriately
    • Check for hidden tabs or visibility changes that pause the loop
  • Scroll-linked effects not triggering
    • Ensure ScrollTrigger is loaded and initialized
    • Validate trigger and end offsets for the hero
  • Logo marquee not scrolling
    • Confirm animation property and keyframes are applied
    • Check for hover pausing behavior interfering with expectations
  • CTA button hover effect not visible
    • Inspect pseudo-element transforms and z-index stacking
    • Verify theme attribute matches expected dark/light variants
  • Mobile menu not opening
    • Check active class toggling and clip-path animation
    • Confirm pointer-events restoration on menu activation

Section sources

  • [hero-parallax.js:297-306](file://src/assets/js/modules/hero-parallax.js#L297-L306)
  • [hero-parallax.js:388-390](file://src/assets/js/modules/hero-parallax.js#L388-L390)
  • [hero-animations.js:142-151](file://src/assets/js/modules/hero-animations.js#L142-L151)
  • [10-logo-marquee.css:21-26](file://src/assets/css/modules/10-logo-marquee.css#L21-L26)
  • [15-cta-section.css:75-99](file://src/assets/css/modules/15-cta-section.css#L75-L99)
  • [25-responsive-tablet-max-width-1024px.css:112-115](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L112-L115)

Conclusion

The page-specific styling system combines modular CSS with targeted JavaScript to deliver immersive hero experiences, cohesive component sections, and robust responsive behavior. The Three.js parallax hero provides a unique scroll-driven animation, while fallback GSAP animations ensure consistent motion across other pages. Macros and dedicated CSS modules keep markup and styling aligned, simplifying maintenance and extension.